<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      class="top-nav"
      @click-left="$router.back()"
      title="新增收货地址"
    >
      <template #left>
        <div class="top-nav-left">
          <van-icon name="arrow-left" color="#000" class="icon" size="24"/>
        </div>
      </template>
    </van-nav-bar>
    <!-- 用户收货地址填写 -->
    <van-field v-model="receiveName" label="姓名" placeholder="收货人姓名" maxlength="30" show-word-limit/>
    <van-field v-model="receiveTelephone" type="tel" label="手机号" placeholder="收货人手机号" maxlength="11" show-word-limit/>
    <van-field v-model="receiveAddress" type="textarea" label="地址" autosize rows="3" placeholder="收货人地址" maxlength="255" show-word-limit/>
    <van-cell center title="是否为默认地址">
      <template #right-icon>
        <van-switch v-model="isDefault" size="24" />
      </template>
    </van-cell>
    <!-- 保存按钮 -->
    <div class="btn-box">
      <van-button 
        class="btn" 
        color="linear-gradient(to right, #ff6034, #ee0a24)" 
        block
        @click="saveReceiveAddress"
      >
        保存
      </van-button>
    </div>
    <!-- 删除按钮 -->
    <div class="btn-box">
      <van-button 
        class="btn" 
        plain 
        color="#ee0a24" 
        block
        @click="deleteReceiveAddress"
      >
        删除
      </van-button>
    </div>
  </div>
</template>

<script>
import { AddressEdit, Switch, Cell } from 'vant'
import { Checkbox, CheckboxGroup, Dialog } from 'vant'

export default {
  name: 'AddUserReceiveAddress',
  components: {
    [AddressEdit.name]: AddressEdit,
    [Switch.name]: Switch,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
  },
  data() {
    return {
      receiveName: '',
      receiveTelephone: '',
      receiveAddress: '',
      isDefault: false,
      isAddNew: false,
      id: -1, // 用户收货地址id
    }
  },
  methods: {
    // 保存收货地址
    saveReceiveAddress() {
      if (this.receiveName.length === 0 || this.receiveTelephone.length === 0 || this.receiveAddress.length === 0) {
        this.$toast.fail('请将收货地址信息填写完整')
        return
      }
      this.req.post(
        'user/add/userReceiveAddressInfo/',
        {
          token: localStorage.getItem('token'),
          receiveName: this.receiveName,
          receiveTelephone: this.receiveTelephone,
          receiveAddress: this.receiveAddress,
          isDefault: this.isDefault,
          id: this.id
        }
      ).then(res=>{
        let data = res.data
        if (data.mark === 1) {
          this.$toast.success(data.message)
          // this.$router.replace({name: 'receiveAddress'})
          this.$router.back()
        } else {
          this.$toast.fail(data.message)
        }
      }, err=>{
        this.$toast.fail(err)
      })
    },
    // 删除收获地址
    deleteReceiveAddress() {
      if (!this.id) {
        this.$toast.fail('当前新增收货地址，无法进行删除')
        return 
      }
      Dialog.confirm({
        message: '是否确认删除该收获地址？',
      })
      .then(() => {
        // on confirm
        this.req.get(
          'user/delete/userReceiveAddressInfo/id/',
          {
            params: {
              id: this.id
            }
          }
        ).then(res=>{
          let data = res.data
          if (data.mark === 1) {
            this.$toast.success(data.message)
            this.$router.back()
          } else {
            this.$toast.fail(data.message)
          }
        }, err=>{
          this.$toast.fail(err)
        })
      })
      .catch(() => {
        // on cancel
      });
    }
  },
  created() {
    let id = this.$route.query.id
    this.id = id
    if(id) {
      this.req.get(
        'user/get/userReceiveAddressInfo/id/',
        {
          params: {
            id
          }
        }
      ).then(res=>{
        let data = res.data
        if (data.mark === 1) {
          this.receiveName = data.data.name
          this.receiveTelephone = data.data.tel
          this.receiveAddress = data.data.address
          this.isDefault = data.data.isDefault > 0 ? true : false
        } else {
          this.$toast.fail(data.message)
        }
      }, err=>{
        this.$toast.fail(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  overflow: hidden;
  margin: 1rem 1rem 0;
  .btn {
    border-radius: 2rem;
  }
}
</style>